事件冒泡 == 得与失

今天想聊一聊js的事件冒泡！

在项目中遇到了一个很奇怪的问题：
父元素点击时，让它的子元素弹出一个伪造的选择框；
在选择框完成选择后，关闭它；
 <div class="msg-list clearfix sex">
    <p class="name-tip">性别</p>  
    <div class="name">
      <p class="sex-val">男</p>
      <div class="sex-select"  id="sex">
        <p class="sex-active">男</p>
        <p>女</p>
      </div>
  </div> 
  （注：着重关注它的层级关系，只是一个简单实现性别切换的功能）

这时候一个诡异的现象发生了：

    无论怎么点击都不会让它实现隐藏，是代码写错了。逻辑没生效？？？
    然而并没有，细细扒一扒，发现在谷歌下那个displace：block；
    没有移除，在消失的那一瞬间，又出现了，时间很短。
    
    突然想起来js中的点击事件是会向上级传递的，（称事件冒泡）
    那让我们再来理一下逻辑：
    父元素点击后，弹起子元素的选择框，在子元素点击后，关闭选择框，
    然后点击事件向上传递，传给父元素，激活父元素的点击事件，完了
    又弹起子元素的选择框。

好了，既然原因已经知晓，那就终止事件冒泡不就得了，网上很多方法：
笔者这里直接在子元素点击事件函数的最后面加一句： return false；

    当然事件冒泡其实也是有一些好处的：
    这个选择框其实还是有一些问题，比如点击其它地方我想让他消失，
    但是我又能预判到用户下一个会点击那个元素呢，人家把你选择框
    激活了，又不一定会选择，又可能会点击其它地方的对吧！所以只
    是选择隐藏，还是有一定问题的。

那么事件冒泡这时候就有用了，所有的点击事件都会传递到根元素，那么
我们只需要在根元素加一个点击事情去隐藏它就ok了。

     $(document).click(function(){
         //隐藏弹出div
     })